<template>

	<tui-list-cell :hover="false" :arrow="theOptions.readonly?false:true">
		<view class="checkbox_line">
			<view class="checkbox_title">
				<text v-show="theRules&&theRules[0]&&theRules[0].required" class="isrequire">*</text>
				<text>{{label}}</text>
			</view>
			<view class="checkbox_content">
				<view :class="item.disabled?'check_line disabled_line':'check_line'" v-for="(item,index) in theOptions.options"
				 :key="index" @click="toCheck(index)">
					<checkbox :value="item.value" :checked="item.checked" :disabled="item.disabled"></checkbox>
					<text>{{item.label}}</text>
				</view>
			</view>
		</view>
	</tui-list-cell>


</template>

<script>
	export default {
		name: 'kmlc-chekbox',
		props: {
			label: {
				type: String
			},
			emData: {
				type: Object
			},
			options: {
				type: Array
			},
			rules: {
				type: Array
			}
		},
		data() {
			return {
				theOptions: Object,
				theRules: [],
				isReadOnly: false,
			}
		},
		watch: {
			emData: function(newVal, oldVal) {
				this.theOptions.options.forEach((item) => {
					item.checked = false;
					item.disabled = false;
				})
			}
		},
		created() {
			if (this.emData && this.emData.options) {
				if (this.emData.rules) {
					this.theRules = this.emData.rules
				};
				this.theOptions = this.emData.options;
				return;
			}
			this.theOptions = this.options;
		},
		methods: {
			toCheck(idx) {
				if (this.theOptions.options[idx].disabled == true) {
					return;
				};
				this.theOptions.options[idx].checked = !this.theOptions.options[idx].checked;
				this.$emit('onChangeVal', {
					value: this.theOptions.options[idx]
				});
				this.theOptions.defaultValue = [];
				this.theOptions.options.forEach(item => {
					if (item.checked == true) {
						this.theOptions.defaultValue.push(item.value);
					}
				});
				

			},
		}
	}
</script>

<style>
	.isrequire{
		color: #d41200;
	}
	
	.checkbox_line {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.checkbox_title {
		min-width: 100upx;
		line-height: 32rpx;
		flex-shrink: 0;
	}

	.checkbox_content {
		width: 100%;
		padding: 12upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.check_line {
		display: flex;
		align-items: center;
		line-height: 30rpx;
		padding: 12rpx 0rpx;
		box-sizing: border-box;
		margin: 0 12upx;
	}

	.disabled_line {
		color: rgba(0, 0, 0, .25);
	}
</style>
